<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现淡入淡出下拉菜单</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div style="width:700px; margin:0 auto;">
	<h1 class="title">纯CSS3实现淡入淡出下拉菜单</h1>
    <dropdown>
        <input id="toggle1" type="checkbox" checked>
        <label for="toggle1" class="animate">MENU<i class="fa fa-bars float-right"></i></label>
        <ul class="animate">
          <li class="animate">Code<i class="fa fa-code float-right"></i></li>
          <li class="animate">Zoom<i class="fa fa-arrows-alt float-right"></i></li>
          <li class="animate">Settings<i class="fa fa-cog float-right"></i></li>
        </ul>
    </dropdown>
    <dropdown>
        <input id="toggle2" type="checkbox">
        <label for="toggle2" class="animate">Menu<i class="fa fa-bars float-right"></i></label>
        <ul class="animate">
          <li class="animate">Code<i class="fa fa-code float-right"></i></li>
          <li class="animate">Zoom<i class="fa fa-arrows-alt float-right"></i></li>
          <li class="animate">Settings<i class="fa fa-cog float-right"></i></li>
        </ul>
    </dropdown>
</div>
</body>
</html>